<template>
	<div class="c-echarts" ref="echartsRef"></div>
</template>

<script setup>
import {onBeforeUnmount, onMounted, ref, shallowRef} from "vue";
import echarts from '../plugins/echarts.js';
import deepClone from "../utils/deepClone.js";

const echartsRef = shallowRef(null)
const timer = ref(null)
const echartsInit = shallowRef(null)
const resizeHandle = () => {
	clearTimeout(timer.value)
	timer.value = setTimeout(() => {
		window.removeEventListener('resize', resizeHandle)
		setTimeout(() => {
			echartsInit.value.resize()
		},200)
	},200)
}

onBeforeUnmount(() => {
	window.removeEventListener('resize', resizeHandle)
	timer.value = null
})

const setEchartsOption = (option={}, isNewDom = false) => {
  // if (isNewDom) {
  //   echartsInit.value.dispose()
  //   echartsInit.value = echarts.init(echartsRef.value);
  // }

	if(!echartsInit.value) {
    echartsInit.value = echarts.init(echartsRef.value);
	}

	echartsInit.value.setOption(option);
	window.addEventListener('resize', resizeHandle)
}
defineExpose({
	setEchartsOption
})
</script>

<style lang="scss" scoped>
.c-echarts{
	width: 100%;
  height: 100%;
}
</style>
